<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2021-10-25 13:39:44
 * @LastEditors: xuzp4
 * @LastEditTime: 2021-10-25 14:23:40
 * @FilePath: \vue_demo\src\view\lixian\index.vue
-->
<template>
  <div id="map"></div>
</template>

<script>
export default {
  mounted() {
    mapboxgl.accessToken =
      "pk.eyJ1IjoieHUwNDMwIiwiYSI6ImNrcHMzeGNhbDAzcHoyb280cmM1MGEzYXYifQ.uZFE2jGWs46691vFMwQLPA";
    var map = new mapboxgl.Map({
      container: "map", // container id
      style: {
        version: 8,
        name: "Mapbox Streets",
        // sprite: "mapbox://sprites/mapbox/streets-v8",
        sprite: "http://localhost:8080/static/assets/sprite",
        glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        sources: {
          "osm-tiles": {
            type: "raster",
            tiles: ["http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"],
            tileSize: 256,
          },
        },
        layers: [
          {
            id: "123",
            type: "raster",
            source: "osm-tiles",
            "source-layer": "osmtiles",
          },
        ],
      },
      center: [119, 28], // starting position [lng, lat]
      zoom: 5, // starting zoom
    });
  },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>